window.addEventListener(
  'click',
  function () {
    console.log('window被点击了')
  },
  false
)

document.addEventListener(
  'click',
  function () {
    console.log('document被点击了')
  },
  false
)

document.documentElement.addEventListener(
  'click',
  function () {
    console.log('html被点击了')
  },
  false
)

document.body.addEventListener(
  'click',
  function () {
    console.log('body被点击了')
  },
  false
)

let box = document.querySelector('.box')
let container = document.querySelector('.container')
let p = document.querySelector('.p')
let nav = document.querySelector('.nav')
let img = document.querySelector('.img')

img.addEventListener(
  'click',
  function (e) {
    // 获得事件对象
    let evt = e || event
    // 阻止事件的冒泡
    evt.stopPropagation()
    // IE浏览器执行的阻止事件冒泡
    evt.cancelBubble = true
    console.log('img被点击了')
  },
  false
)
container.addEventListener(
  'click',
  function () {
    console.log('container被点击了')
  },
  false
)
p.addEventListener(
  'click',
  function () {
    console.log('p被点击了')
  },
  false
)
nav.addEventListener(
  'click',
  function (e) {
    // 阻止默认事件
    e.preventDefault()
    console.log('nav被点击了')
  },
  false
)
box.addEventListener(
  'click',
  function () {
    console.log('box被点击了')
  },
  false
)
// addEventListener函数的第三个参数是设置事件模型: false是捕获型事件流，false是冒泡型事件流
// 阻止事件的冒泡方法：e.stopPropagation()
